<!DOCTYPE html>
<html lang="en">
<head>
    <!--meta原信息,charset字符集,utf-8中文-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>永和小票</title>
    <!--样式设计写在style标签中，key:value-->
    <style>/*对整个页面进行样式修饰*/
    body{
        width:350px;
        font-size:10px;
    }
    /*solid 实线，dashed虚线*/
    hr{border:1px dashed;}
    
    .self{
        /*padding 修饰4周 上右下左（顺时针一圈4个）*/
        padding-left: 100px;/*左边空一定距离*/
    }
    .note{
      /*  padding-top: 20px ;上空
        padding-bottom: 15px;下空*/
        margin-top:20px ;
        margin-bottom: 15px;
    }
    .o{
        font-size: 24px;
        font-weight: bold;
    }
    .img{
          padding-left: 80px;
    }
    </style>
</head>
<body >
    <div>顾客联</div>
    <div class="o">请您留意取餐账单号</div>
    <div class="self">自取顾客联</div>
    <div>永和大王(北三环西路店)</div>
    <div>010-62112313</div>
    <div class="self">--结账单--</div>
    <div class="o">账号单：P000010</div>
    <div>账单类型：堂食</div>
    <div>人数：1</div>
    <div>收银员:张静</div>
    <div>开单时间：2018-04-17 07:24:25</div>
    <div>结账时间：2018-04-18 09:25:25</div>

    <!--表格是没有列概念，它叫做单元格
    页面中换行会被解析一个空格
    align横向排列:left居左、center 居中、 right居右
    valign纵向排列：top居上、center居中、bottom居下    
-->
<hr/>
    <table border="0">
        <tr>
           <td width="50" align="center">数量</td>
           <td width="190">品项</td>
           <td width="50" align="center">金额</td>
        </tr>
        <tr>
           <td valign="top">1</td>
           <td>玉米肉松蛋饼2P<br/>
               1 X --玉米肉松蛋饼<br/>
               1 X --现磨豆浆(热/甜) 
           </td>
           <td valign="top" align="right">8.00</td>
        </tr>
    </table>
<hr/>
    <table border="0">
        <tr>
            <td width="245">合计</td>
            <td width="51" align="right">8.00</td>
        </tr>
        <tr>
            <td>微支付</td>
            <td align="right">8.00</td>
        </tr>
    </table>
<hr/>    
    <div>打印时间:2018-04-17 07:24:38</div>
<hr/>
<!--&nbsp;特殊字符代表一个空格 7个空格等价于2个汉字距离-->
    <div class="note">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期， 如您需要当日的电子发票请务必在消费当日通过扫描下方二维码， 根据指引步骤开具您的增值税电子普通发票。 此二维码30天有效，扫描时请保持小票平整。</div>

<!--引用图片 只设置一个,它会等比缩放
src配置图片来源，相对路径，从自己html文件出发去找
html所在目录下的images目录，images目录下的qr.png
只设置宽度，高度会自动算，等比缩放；
既设置宽，设置高，按要求，不按等比
-->
<img class="img" src="images/qr.png" wdith="200" height="200"/ >

<div>官网:www.yonghe.com.cn</div>
<div>加盟热线:86-21-651236578&nbsp;或&nbsp;86-20-658412412</div>
</body>
</html>